<template>
  <div>
    <div class="ta-c mtb-60">
      <img class="title-img" src="@/assets/img/xmbz.svg" alt="">
    </div>
    <van-form @submit="onSubmit" ref="formRef">
      <van-field
        v-model="state.phone"
        name="phone"
        placeholder="请输入下单人或收货人手机号"
        :rules="[{ required: true, message: '请输入下单人或收货人手机号' }]"
      />
      <van-field
        v-model="state.code"
        name="code"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请输入验证码' }]">
        <template #button>
          <van-button :disabled="state.codeWaitTime !== 0" size="small" round @click="getCode">{{state.codeWaitTime ? `${state.codeWaitTime} 秒后重试` : '获取验证码'}}</van-button>
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block color="linear-gradient(to right, #d61a1b, #e2595a)" native-type="submit"> 登录 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import { defineComponent, reactive, ref, onActivated } from 'vue';
  import { phoneCaptcha, phoneToken } from '@/api/common'
  import { Toast } from 'vant'
  import { getLocations, setLocations } from '@/utils/storage'
  import { useRouter, useRoute } from 'vue-router';

  export default defineComponent({
    name: 'Login',
    setup() {
      const router = useRouter()
      const route = useRoute()
      
      const state = reactive({
        phone: '',
        code: '',
        codeWaitTime: 0
      });
      const formRef = ref()
      const onSubmit = () => {
        const { redirect } = route.query
        const params = {
          captcha: state.code,
          phone: state.phone
        }
        phoneToken(params).then(res => {
          if (res.code == 200) {
            setLocations('accessToken', res.data.accessToken)
            setLocations('accessTokenPhone', state.phone)
            router.push(redirect ? redirect : '/order/list')
          }
        })
      }

      // 获取验证码
      let codeTimer = null
      const getCode = () => {
        if (state.codeWaitTime !== 0) {
          return
        }
        if (state.phone) {
          phoneCaptcha({phone: state.phone}).then(res => {
            state.codeWaitTime = 60
            codeTimer = setInterval(() => {
              state.codeWaitTime--
              if (state.codeWaitTime === 0) {
                clearInterval(codeTimer)
                codeTimer = null
              }
            }, 1000)
          })
        } else {
          Toast('请输入手机号')
        }
      }

      const init = () => {
        const { redirect } = route.query
        const accessToken = getLocations('accessToken')
        const accessTokenPhone = getLocations('accessTokenPhone')
        if (accessToken && accessTokenPhone) {
          if (redirect) {
            router.push(redirect)
          } else {
            router.push({
              path: '/order/list',
              query: route.query
            })
          }
        }
      }

      onActivated(() => {
        init()
      })

      return {
        state,
        formRef,
        onSubmit,
        getCode
      };
    },
  });
</script>

<style lang="less" scoped>
.title-img {
  width: 154px;
}
</style>
